﻿<Page
    x:Class="PuzzleModern.Phone.HubPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PuzzleModern.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:PuzzleModern.Phone.Data"
    x:Name="pageRoot"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="HubSectionHeaderTemplate">
            <TextBlock Margin="0,0,0,-9.5" Text="{Binding}"/>
        </DataTemplate>
        <DataTemplate x:Key="HubHeaderTemplate">
            <TextBlock Margin="0,20,0,0" Text="{Binding}" FontSize="56" Foreground="#008000"/>
        </DataTemplate>
        <DataTemplate x:Key="HubSectionNoHeaderTemplate">
            <Border Height="1" Margin="0" Padding="0"/>
        </DataTemplate>
    </Page.Resources>

    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.PrimaryCommands>
                <AppBarButton Icon="Setting" Label="settings" Click="SettingsButton_Click"/>
                <AppBarButton Icon="Help"  Label="help" Click="HelpButton_Click"/>
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="load game" Click="LoadGameButton_Click"/>
                <AppBarButton Label="about this app" Click="AboutButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid x:Name="LayoutRoot">
        <Hub x:Name="Hub" x:Uid="Hub" Header="portable puzzles" HeaderTemplate="{ThemeResource HubHeaderTemplate}">
            <HubSection x:Name="AllPuzzlesSection" x:Uid="AllPuzzlesSection" DataContext="{Binding Items}" HeaderTemplate="{ThemeResource HubSectionNoHeaderTemplate}">
                <DataTemplate>
                    <Grid>

                        <GridView
                            x:Name="AllPuzzlesGridView"
                            ItemsSource="{Binding}"
                            Loaded="AllPuzzlesGridView_Loaded"
                            >
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <GridViewItem Holding="ListViewItem_Holding" Tapped="ListViewItem_Tapped" Margin="0,0,15,20">
                                        <StackPanel Orientation="Vertical">
                                            <Border BorderBrush="#dcdad5" Background="#dcdad5" BorderThickness="5">
                                                <Image Height="55" Width="55" Source="{Binding Icon}" Stretch="Uniform" AutomationProperties.Name="{Binding Name}"/>
                                            </Border>
                                            <TextBlock Text="{Binding Name}" FontSize="13" HorizontalAlignment="Center" />
                                        </StackPanel>
                                    </GridViewItem>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>

                        <ListView
                            x:Name="AllPuzzlesListView"
                            ItemsSource="{Binding}"
                            Loaded="AllPuzzlesListView_Loaded"
                            >
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ListViewItem Holding="ListViewItem_Holding" Tapped="ListViewItem_Tapped" Width="720">
                                        <StackPanel Margin="0,0,0,20" Orientation="Horizontal">
                                            <Border BorderBrush="#dcdad5" Background="#dcdad5" Margin="0,0,20,0" BorderThickness="5">
                                                <Image Height="55" Width="55" Source="{Binding Icon}" Stretch="Uniform" AutomationProperties.Name="{Binding Name}"/>
                                            </Border>
                                            <StackPanel Margin="0,0,0,0" Orientation="Vertical">
                                                <TextBlock Text="{Binding Name}" Style="{ThemeResource ListViewItemTextBlockStyle}" FontSize="28" />
                                                <TextBlock Text="{Binding Synopsis}" FontSize="13" TextWrapping="WrapWholeWords" Width="240" Height="36" />
                                            </StackPanel>
                                        </StackPanel>
                                    </ListViewItem>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

                    </Grid>
                </DataTemplate>
            </HubSection>
        </Hub>
    </Grid>
</Page>